<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟实现 Vue</title>
</head>
<body>
    <div id="app">
        <h1>差值表达式</h1>
        <h3>{{msg}}</h3>
        <h3>{{count}}</h3>
        <h1>v-text</h1>
        <div v-text="msg"></div>
        <h1>v-model</h1>
        <p>v-on 我绑定了聚焦事件</p>
        <input type="text" v-model="msg" @focus="focusFn">
        <p>v-on 我绑定了失去焦点事件</p>
        <input type="text" v-model="count" v-on:blur="blurFn">
        <p>v-on 使用对象绑定多个事件，如： v-on='{"focus": "focusFn", "click": "inputClick"}'</p>
        <input type="text" v-on='{"focus": "focusFn", "click": "inputClick"}' placeholder="我绑定了两个事件">
        <div class="html" v-html="temp">
            <div>v-html 66666666</div>
        </div>
        <div v-on:click="clickFn1">我是v-on指令 点我试试</div>
        <p>v-on 指令简写为@</p>
        <div @click="clickFn2">我是v-on指令 @click 点我试试</div>
    </div>

    <script src="./dep.js"></script>
    <script src="./watcher.js"></script>
    <script src="./compiler.js"></script>
    <script src="./observer.js"></script>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                count: 10,
                msg: "hello Vue",
                person: {
                    name: "张三"
                },
                temp: "<h2>我是v-html指令</h2>"
            },
            methods: {
                clickFn1(event) {
                    console.log(event)
                    console.log("我是v-on 指令", this)
                    this.count = Number(this.count) + 1
                    alert("我是v-on 指令")
                },
                clickFn2() {
                    this.msg = "hello 我是v-on指令"
                    alert("我是简写的 v-on 指令")
                },
                focusFn() {
                    console.log("聚焦了")
                },
                inputClick() {
                    console.log("点击了input")
                },
                blurFn() {
                    console.log("失去焦点了")
                }
            }
        })
        console.log(vm)

    </script>

</body>
</html>